<template>
	<view>

		<view class="container">
			<view class="banner">
				<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true">
					<swiper-item v-for="(item, index) in find.thumbs" :key="index">
						<image :src="item.url" mode="aspectFill" v-if="item.type == 'image'"></image>
						<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
							objectFit="cover" v-else-if="item.type == 'video'"></video>
					</swiper-item>
				</swiper>
			</view>

			<view class="desc margin-top">
				<view class="auth grid col-3 padding-xs text-center text-sm light themeColor">
					<view>
						<text class="cuIcon-profile padding-right-mn"></text> 实名认证
					</view>
					<view>
						<text class="cuIcon-vipcard padding-right-mn"></text> 资格证书
					</view>
					<view>
						<text class="cuIcon-refund padding-right-mn"></text> 爽约包赔
					</view>
				</view>
				<view class="desc-content bg-white padding radius-xl">
					<view class="top margin-bottom-sm">
						<view class="name">
							<text class="text-xl text-bold text-black">{{ find.title }}</text>
							<view class="cu-tag sm round margin-left" @click="collect(find)">
								<text class="padding-right-mn text-red" :class="find.is_collect ? 'cuIcon-likefill' : 'cuIcon-like'"></text> {{ find.collect_num }}
							</view>
							<view class="cu-tag sm round margin-left themeColor">
								<text class="padding-right-mn cuIcon-favorfill"></text> {{ find.comment_grade }}
							</view>
						</view>
						<view class="distance">
							<view class="text-red">
								<text class="text-sm">¥</text>
								<text class="text-right padding-left-mn money">{{ find.price }}</text>
								<text class="text-sm" v-if="find.max_price > find.price">起</text>
							</view>
						</view>
					</view>
					<view class="center text-sm text-gray">
						<view>
							<text class="text-sm cuIcon-timefill themeColor"></text>
							<text class="text-right padding-left-mn text-sm text-gray">{{ find.service_duration }}分钟</text>
						</view>
						<view class="">
							<text class="cuIcon-profile padding-right-mn"></text> 适合人群：全体
						</view>
						<text>超{{ find.sales_num }}人选择</text>
					</view>
					<view class="buttom text-sm text-gray">
						<text>{{ find.tips }}</text>
					</view>
				</view>
			</view>

			<view class="navaction padding padding-bottom-0">
				<view class="bg-white radius-xl padding-top">
					<view class="grid col-3 padding-sm text-center">
						<view :class="navTbale == index ? 'active' : ''" v-for="(item, index) in navList" :key="index"
							@click="changeNavTab(index)">
							{{ item }}
						</view>
					</view>
					<view class="technician-list padding-top-0" v-show="navTbale === 0">
						<template v-if="technicianList.length > 0">
							<view class="item bg-white radius-lg padding-sm margin-bottom-sm crow"
								v-for="(item, index) in technicianList" :key="index"
								:class="index > 0 ? 'solid-bottom' : ''">
								<view class="left avatar">
									<image :src="item.headimg" lazy-load mode="" class="img"></image>
									<image src="@/static/image/parter/title/title-1.gif"
										v-if="item.headimg_decoration === 1" mode="" class="title-img"></image>
									<image src="@/static/image/parter/title/title-2.gif"
										v-else-if="item.headimg_decoration === 2" mode="" class="title-img"></image>
									<image src="@/static/image/parter/title/title-3.gif"
										v-else-if="item.headimg_decoration === 3" mode="" class="title-img"></image>
									<image src="@/static/image/parter/title/title-4.gif"
										v-else-if="item.headimg_decoration === 4" mode="" class="title-img"></image>
								</view>
								<view class="right">
									<view class="top crow space-between">
										<view class="left-box">
											<text class="padding-right-mn text-black text-bold">{{ item.nickname }}</text>
											<text class="cuIcon-like"></text>
										</view>
										<view class="status crow radius">
											<view class="zuizao">
												最早可约
											</view>
											<view class="time">
												{{ item.appointment_time }}
											</view>
										</view>
									</view>
									<view class="center text-sm text-gray crow space-between">
										<view class="left-box">
											<text class="cuIcon-shop" v-if="item.shop_id"></text>
											<text class="padding-left-mn">{{ item.shop_title }}</text>
										</view>
										<view class="right-box crow" v-if="item.distance_text">
											<u-icon name="map" size="15" color="gray"></u-icon>
											{{ item.distance_text }}
										</view>
									</view>
									<view class="bottom text-gray text-sm crow space-between">
										<view class="crow">
											<view class="solid-right padding-right">
												<text class="cuIcon-form themeColor"></text>{{ item.order_num }}
											</view>
											<view class="solid-right padding-lr">
												<text class="cuIcon-friend themeColor"></text>{{ item.people_num }}
											</view>
											<view class="padding-left">
												<text class="cuIcon-message themeColor"></text>{{ item.comment_num }}
											</view>
										</view>
										<view class="right-box">
											<view class="liji"
												@click="$utils.$page.open('/pages/technician/details?id=' + item.technician_id)">
												<button class="cu-btn round sm">立即预约</button>
											</view>
										</view>
									</view>
								</view>
							</view>
						</template>
						<view class="flex flex-direction justify-center" v-else>
							<emptyData type="notOrder" text="暂无推荐技师"></emptyData>
						</view>
					</view>

					<view class="padding project-info" v-show="navTbale === 1">
						<rich-text :nodes="content" class="content"></rich-text>
					</view>

					<view class="padding-lr padding-tb-sm comment" v-show="navTbale === 2">
						<template v-if="find.comments && find.comments.length > 0">
							<view class="item margin-bottom" v-for="(item, index) in find.comments" :key="index"
								:class="index > 0 ? 'solid-bottom' : ''">
								<view class="top crow">
									<image :src="item.headimg" mode="" class="avatar round"></image>
									<view class="right margin-left-sm">
										<view class="nickname crow space-between">
											<view class="text-black">
												<text class="value">{{ item.nickname }}</text>
											</view>
											<view class="time text-sm">
												<text>{{ item.create_time }}</text>
											</view>
										</view>
										<view class="">
											<u-rate :count="5" :value="item.grade" readonly></u-rate>
										</view>
									</view>
								</view>
								<view class="content text-sm margin-top-xs">
									<text>{{ item.content }}</text>
								</view>
							</view>
						</template>
						<view class="flex flex-direction justify-center" v-else>
							<emptyData type="notLog" text="暂无评论"></emptyData>
						</view>
					</view>
				</view>
			</view>


		</view>

		<loading v-if="pageLoading" />
	</view>
</template>

<script>

export default {
	data() {
		return {
			pageLoading: false,
			find: {},
			navList: ['推荐技师', '项目介绍', '用户评价'],
			navTbale: 0,
			technicianList: []
		}
	},
	// 计算属性
	computed: {
		content() {
			let retult = [];
			if (this.find.content) {
				for (let i = 0; i < this.find.content.length; i++) {
					retult.push({
						name: 'img',
						attrs: {
							src: this.find.content[i]
						}
					});
				}
			}
			if (this.find.taboo) {
				for (let i = 0; i < this.find.taboo.length; i++) {
					retult.push({
						name: 'img',
						attrs: {
							src: this.find.taboo[i]
						}
					});
				}
			}
			if (this.find.order) {
				for (let i = 0; i < this.find.order.length; i++) {
					retult.push({
						name: 'img',
						attrs: {
							src: this.find.order[i]
						}
					});
				}
			}
			return retult;
		}
	},
	onLoad(options) {
		this.getDetails(options.id);
	},
	methods: {
		changeNavTab(index) {
			this.navTbale = index;
		},
		getDetails(id) {
			if (this.pageLoading) return;
			this.pageLoading = true;
			this.$utils.$api.Service.details(id).then(data => {
				this.find = data;
				this.getTechnicianList();
			}).catch((res) => {
				uni.showModal({
					title: '提示',
					content: res.msg,
					showCancel: false,
					success: () => {
						this.$utils.$page.back();
					}
				});
			}).finally(() => {
				this.pageLoading = false;
			});
		},
		getTechnicianList() {
			this.pageLoading = true;
			this.$utils.$api.Technician.list({
				service_id: this.find.id
			}).then(data => {
				this.technicianList = data;
			}).finally(() => {
				this.pageLoading = false;
			});
		},
		collect(item) {
			this.$utils.$api.Collect.service(item.id).then((data) => {
				item.is_collect = data.state;
				if (data.state) {
					item.collect_num++;
				} else {
					item.collect_num--;
				}
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			})
		}
	}
}
</script>

<style lang="less" scoped>
.banner {
	border-bottom-left-radius: 55upx;
	border-bottom-right-radius: 55upx;
	overflow: hidden;
	height: 400rpx;

	.screen-swiper {
		height: 400rpx;
	}
}

.project-info {
	image {
		width: 100%;
	}

	.content img {
		max-width: 100%;
	}
}

.navaction {
	.active {
		color: black;
		font-weight: bold;
	}
}

.desc {
	.auth {
		border-top-left-radius: 15upx;
		border-top-right-radius: 15upx;
		width: 85%;
		margin: auto;
	}

	.desc-content {
		width: 93%;
		margin: auto;
		line-height: 45upx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.name {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.distance {
				.money {
					font-size: 40upx;
				}
			}
		}

		.center {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}

.technician-list {
	.item {
		height: 200upx;

		.avatar {
			position: relative;
			width: 170upx;
			height: 170upx;
			display: flex;
			align-items: center;

			.img {
				width: 130upx;
				height: 130upx;
				border-radius: 50%;
			}

			.title-img {
				width: 180upx;
				height: 180upx;
				position: absolute;
				left: -20rpx;
			}
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150upx;

			.top {
				.status {
					border: 2rpx solid var(--theme-color);
					font-size: 20rpx;

					.zuizao {
						background-color: var(--theme-color);
						padding: 5rpx;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						color: white;
					}

					.time {
						padding: 5rpx;
					}
				}
			}
		}
	}
}

.liji {
	button {
		background: var(--theme-bg-color);
		color: white;
	}
}

.comment {
	.item {
		min-height: 130rpx;

		.top {
			.avatar {
				height: 70rpx;
				width: 70rpx;
			}

			.right {
				flex: 1;

				.nickname {
					.value {
						padding-left: 5rpx;
					}
				}
			}
		}

		.content {
			padding-bottom: 15rpx;
		}
	}
}
</style>
